<template>
    <div id="search_container">
        <div class="int">
            <input type="text" placeholder="请输入你要查找的关键词" v-model="inputObject.userInput" :id="inputObject.inputId">
        </div>
        <div class="btn">
            <button @click="send">搜索</button>
        </div>
    </div>
</template>

<script>
    import bus from "@/bus/bus";
    export default {
        name: "Search",
        data(){
            return{
                inputObject:{
                    userInput:'',
                    inputId:'searchInput'
                }
            }
        },
        methods:{
            send(){
                bus.$emit('shareUserInput',this.inputObject)
                console.log(this.inputObject)
            }
        },
        mounted() {
            this.send()
        }
    }
</script>

<style scoped>
    #search_container{
        height: 100%;
        width: 100%;
        display: flex;
    }
    .btn{
        flex: 1;
    }
    .btn button{
        width: 100%;
        height: 100%;
        border: none;
        background: #67C23A;
        color: white;
    }
    .int{
        flex: 2;
        opacity: 0.8;
    }
    .int input{
        height: 100%;
        width: 100%;
        text-align: center;
        border: none;
    }
</style>